<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>图片轮播</title>
		<style>
			* {
				margin: 0px;
				padding: 0px;
				list-style-type: none;
			}
			#banner {
				width: 520px;
				height: 280px;
				position: absolute;
				top: 50%;
				margin-top: -140px;
				left: 50%;
				margin-left: -200px;
			}
			.pic img {
				position: absolute;
			}
			.tabs {
				position: absolute;
				bottom: 10px;
				left: 200px;
			}
			.tabs li {
				width: 20px;
				height: 20px;
				border: 2px solid #fff;
				float: left;
				margin-left: 5px;
				border-radius: 100%;
			}
			.btn {
				width: 30px;
				height: 50px;
				background-color: rgba(0, 0, 0, .5);
				color: #fff;
				font-size: 30px;
				line-height: 50px;
				text-align: center;
				position: absolute;
				top: 50%;
				margin-top: -25px;
				cursor: pointer;
			}
			.btn:hover {
				background-color: rgba(0, 0, 0, .8);
				color: red;
			}
			.btn1 {
				left: 0;
			}
			.btn2 {
				right: 0;
			}
			.bg {
				background-color: red;
			}
		</style>
		<script src="jquery-3.4.1.min.js"></script>
		<script>
			var i = 0;
			var Timer;
			$(function() {
				$(".picImg").eq(0).show().siblings().hide();
				//自动轮播
				TimerBanner();

				//点击红圈

				$(".tabs li").hover(function() { //鼠标移动上去
				    
					clearInterval(Timer);
					i = $(this).index();
					showPic();
				}, function() { //鼠标离开
					TimerBanner();
				});
				//点击左右按钮
				$(".btn1").click(function() {
					
					clearInterval(Timer);
					i--;
					if (i == -1) {
						i = 4;
					}
					showPic();
					TimerBanner();
				});
				$(".btn2").click(function() {
					clearInterval(Timer);
					i++;
					if (i == 5) {
						i = 0;
					}
					showPic();
					TimerBanner();
				});
				$(".picImg").mouseover(function(){
				 $(".btn1").show();	
				 $(".btn2").show();
				}).mouseout(function(){
					$(".btn1").hide();
					$(".btn2").hide();
				});
				
			});

			function TimerBanner() {
				Timer = setInterval(function() {
					i++;
					if (i == 5) {
						i = 0;
					}
					showPic()
				}, 1000);
			}

			function showPic() {
				$(".picImg").eq(i).show().siblings().hide();
				$(".tabs li").eq(i).addClass("bg").siblings().removeClass("bg");
			}
		</script>
	</head> 
	<body>
		<div id="banner">
			<div class="pic">
				<div class="picImg"><img src="../img/1%20(2).jpg" width="520" height="280" /></div>
				<div class="picImg"><img src="../img/2%20(2).jpg" width="520" height="280"  /></div>
				<div class="picImg"><img src="../img/3%20(2).jpg" width="520" height="280"  /></div>
				<div class="picImg"><img src="../img/4%20(2).jpg" width="520" height="280"  /></div>
				<div class="picImg"><img src="../img/5%20(2).jpg" width="520" height="280" /></div>
			</div>
			<ul class="tabs">
				<li class="bg"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="btn btn1">&lt;</div>
			<div class="btn btn2">&gt;</div>
		</div>
	</body>
</html>